<template>
  <transition name="fade">
    <div
      class="layui-layer layui-layer-tips layui-edit-face edit-content"
      v-show="isshowmote"
    >
      <div class="layui-content">
        <ul class="layui-clear">
          <li
            v-for="(item, index) in lists"
            :key="'item' + index"
            @click="handleFaceClick(index)"
          >
            <img :src="item" alt="" />
          </li>
        </ul>
      </div>
    </div>
  </transition>
</template>

<script>
import faces from '@/assets/js/face'
export default {
  name: 'Face',
  //  props:['isshowmote','ctrl'],
  props: {
    isshowmote: {
      type: Boolean,
      default: false
    },
    ctrl: {
    }
  },

  components: {

  },
  data () {
    return {
      face: '',
      lists: faces
    };
  },

  computed: {},

  mounted () {
    this.$nextTick(() => {
      document.querySelector('body').addEventListener('click', this.handleBodyClick)
    })
  },
  beforeDestroy () {
    document.querySelector('body').removeEventListener('click', this.handleBodyClick)
  },
  methods: {
    handleFaceClick (index) {
      this.$emit('checkmojo', index)
    },
    handleBodyClick (e) {
      e.stopPropagation()
      // console.log(this.ctrl);
      if (typeof this.ctrl === 'undefined') { return }
      // console.log(e);
      //触发隐藏本组件关闭
      //判断是否点击了非控制地区
      if (!this.ctrl.contains(e.target)) {
        this.$emit('closeEvent')
      }

    }
  }
}

</script>
<style scoped lang='scss' >
.edit-content {
  position: absolute;
  top: 42px;
}
</style>